<template>
  <div class="lottery-generator">
    <h1>双色球号码生成器</h1>
    
    <div class="controls">
      <button @click="generateNumbers" class="primary-btn">
        <i class="fas fa-random"></i> 生成号码
      </button>
      <button @click="generateMultiple" class="primary-btn">
        <i class="fas fa-list-ol"></i> 生成多组
      </button>
      <input 
        v-model.number="count" 
        type="number" 
        min="1" 
        max="10" 
        placeholder="组数">
      <button @click="clearAll" class="danger-btn">
        <i class="fas fa-trash"></i> 清空
      </button>
    </div>

    <transition name="fade">
      <div class="numbers" v-if="currentNumbers.length">
        <h3>当前号码:</h3>
        <div class="ball-group">
          <transition-group name="bounce">
            <span v-for="(num, index) in currentNumbers.slice(0,6)" 
                  :key="'current'+index" 
                  class="red-ball">
              {{formatNumber(num)}}
            </span>
          </transition-group>
          <span class="blue-ball">{{formatNumber(currentNumbers[6])}}</span>
        </div>
        <div class="button-group">
          <button @click="saveToHistory" class="secondary-btn">
            <i class="fas fa-save"></i> 保存
          </button>
          <button @click="exportToCSV" class="secondary-btn">
            <i class="fas fa-file-download"></i> 导出CSV
          </button>
        </div>
      </div>
    </transition>

    <transition name="fade">
      <div class="multiple-groups" v-if="multipleNumbers.length">
        <h3>多组号码:</h3>
        <div class="ball-group" v-for="(group, groupIndex) in multipleNumbers" :key="groupIndex">
          <span v-for="(num, index) in group.slice(0,6)" 
                :key="index"
                class="red-ball">
            {{formatNumber(num)}}
          </span>
          <span class="blue-ball">{{formatNumber(group[6])}}</span>
        </div>
      </div>
    </transition>

    <transition name="fade">
      <div class="history" v-if="history.length">
        <div class="history-header">
          <h3>历史记录:</h3>
          <button @click="clearHistory" class="danger-btn small">
            <i class="fas fa-trash"></i> 清除历史
          </button>
        </div>
        <div class="history-list">
          <div class="history-item" v-for="(item, index) in history" :key="'history'+index">
            <div class="ball-group">
              <span v-for="(num, numIndex) in (item.numbers || item).slice(0,6)" 
                    :key="numIndex"
                    class="red-ball small">
                {{formatNumber(num)}}
              </span>
              <span class="blue-ball small">{{formatNumber((item.numbers || item)[6])}}</span>
            </div>
            <span class="time">{{formatDate(item.time)}}</span>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'LotteryGenerator',
  data() {
    return {
      currentNumbers: [],
      multipleNumbers: [],
      history: [],
      count: 1
    }
  },
  methods: {
    generateNumbers() {
      // 生成6个红球号码(1-33)
      let redBalls = []
      while(redBalls.length < 6) {
        const num = Math.floor(Math.random() * 33) + 1
        if(!redBalls.includes(num)) {
          redBalls.push(num)
        }
      }
      redBalls.sort((a, b) => a - b)
      
      // 生成1个蓝球号码(1-16)
      const blueBall = Math.floor(Math.random() * 16) + 1
      
      this.currentNumbers = [...redBalls, blueBall]
    },
    generateMultiple() {
      this.multipleNumbers = []
      for(let i = 0; i < this.count; i++) {
        this.generateNumbers()
        this.multipleNumbers.push([...this.currentNumbers])
      }
    },
    formatNumber(num) {
      if (num === undefined || num === null) {
        return '00'
      }
      return num.toString().padStart(2, '0')
    },
    clearAll() {
      this.currentNumbers = []
      this.multipleNumbers = []
    },
    saveToHistory() {
      const numbersWithTime = {
        numbers: [...this.currentNumbers],
        time: new Date()
      }
      this.history.unshift(numbersWithTime)
      // 最多保存10条历史记录
      if (this.history.length > 10) {
        this.history.pop()
      }
    },
    formatDate(date) {
      return new Date(date).toLocaleString()
    },
    exportToCSV() {
      // 修改数据获取方式
      const headers = ['红球1', '红球2', '红球3', '红球4', '红球5', '红球6', '蓝球', '时间']
      const rows = this.history.map(item => {
        const numbers = item.numbers || item.slice(0, 7)
        const time = item.time ? new Date(item.time).toLocaleString() : ''
        return [...numbers, time]
      })
      
      // 创建CSV内容
      const csvContent = [
        headers.join(','),
        ...rows.map(row => row.join(','))
      ].join('\n')
      
      // 创建Blob对象
      const blob = new Blob(['\ufeff' + csvContent], { 
        type: 'text/csv;charset=utf-8;' 
      })
      
      // 创建下载链接
      const link = document.createElement('a')
      const url = URL.createObjectURL(blob)
      
      // 设置文件名
      const date = new Date().toLocaleDateString().replace(/\//g, '-')
      link.setAttribute('href', url)
      link.setAttribute('download', `双色球记录_${date}.csv`)
      
      // 触发下载
      document.body.appendChild(link)
      link.click()
      
      // 清理
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
    },
    clearHistory() {
      if (confirm('确定要清除所有历史记录吗？')) {
        this.history = []
        localStorage.removeItem('lotteryHistory')
      }
    }
  },
  created() {
    // 从localStorage加载历史记录
    const savedHistory = localStorage.getItem('lotteryHistory')
    if (savedHistory) {
      this.history = JSON.parse(savedHistory)
    }
  },
  watch: {
    history: {
      handler(newHistory) {
        // 保存历史记录到localStorage
        localStorage.setItem('lotteryHistory', JSON.stringify(newHistory))
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.lottery-generator {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.controls {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.primary-btn {
  background-color: #4CAF50;
  color: white;
}

.secondary-btn {
  background-color: #2196F3;
  color: white;
}

.danger-btn {
  background-color: #f44336;
  color: white;
}

button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

input {
  width: 60px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

.ball-group {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.red-ball, .blue-ball {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
}

.red-ball.small, .blue-ball.small {
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 0.9em;
}

.red-ball {
  background-color: #f44336;
}

.blue-ball {
  background-color: #2196F3;
}

.history {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.history-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.danger-btn.small {
  padding: 4px 8px;
  font-size: 0.9em;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}

.time {
  color: #666;
  font-size: 0.9em;
}

/* 动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
</style> 